<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .mask {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            background-color: #fff;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="showModal">点击显示弹窗</button>
    <div @click.self="hideModal" class="mask" v-show="isShow">
        <div class="content">
            <p>这是内容1</p>
            <p>这是内容2</p>
            <p>这是内容3</p>
            <p>这是内容4</p>
        </div>
    </div>
</div>
<script src="./vue.js"></script>
<script>

    const vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            showModal() {
                this.isShow = true;
            },
            hideModal() {
                this.isShow = false;
            }
        }
    })


</script>
</body>
</html>